<template>
  <div class="article">
    <!-- 1.0 头部导航 -->
    <van-nav-bar
      title="文章详情"
      left-text="返回"
      left-arrow
      class="header"
      @click-left="$router.back()"
    >
      <template #left>
        <van-icon
          class="arrow-left"
          name="arrow-left"
        />
        <i class="iconfont iconnew"></i>
      </template>
      <template #right>
        <van-button
          round
          :type="article.has_follow ? 'default' :  'danger' "
          size="mini"
          @click="followBtn"
        >{{ article.has_follow ? '已关注' : '+ 关注' }}</van-button>
      </template>
    </van-nav-bar>
    <div>文章页 {{ $route.params }}</div>
    <!-- 2.1 文章内容 -->
    <div class="article-main">
      <h1 class="title">{{ article.title }}</h1>
      <!-- 🔔 && 如果左值为 true 值，继续往后运行，后面的就是数据 -->
      <p class="author">{{ article.user && article.user.nickname }} {{ article.create_date | formatDate }}</p>
      <!-- 🔔 v-html 用于展示 HTML 布局 -->
      <article
        class="article-in"
        v-html="article.content"
      >
      </article>
    </div>
    <!-- 2.2 新闻内容 -->
    <!-- 3.0 点赞和分享操作 -->
    <div class="operate">
      <div
        class="btn"
        @click="likeFn"
        :class="{ active : article.has_like }"
      >
        <i class="iconfont icondianzan"></i>
        <span>{{ article.like_length }}</span>
      </div>
      <div class="btn">
        <i class="iconfont iconweixin"></i>
        <span>微信</span>
      </div>
    </div>
    <!-- 4.0 底部评论 - 组件 -->
    <MyComment :article="article"></MyComment>
  </div>
</template>

<script>
import { getPostDetailByIdAPI } from "../apis/news";
import { userFollowsByIdAPI, userUnFollowsByIdAPI } from "../apis/user";
import { updatePostLikeByIdAPI } from "../apis/news";
import MyComment from '../components/MyComment.vue'
export default {
  components: {
    MyComment
  },
  data() {
    return {
      // 为了方便，把路由的 id 存起来
      id: this.$route.params.id,
      // 文章对象
      article: {},
    };
  },
  // 组件初始化完成
  async created() {
    // 根据 id 获取文章详情
    const res = await getPostDetailByIdAPI(this.id);
    console.log(res);
    // 数据绑定，用于页面展示数据
    this.article = res.data.data;
  },
  methods: {
    async followBtn() {
      // 有两种情况： has_follow: true / false
      //  1. 如果是已经关注，调用取消关注的API
      if (this.article.has_follow) {
        // 💥 注意这里是用户的 id（不是文章的id）
        const res = await userUnFollowsByIdAPI(this.article.user.id);
        // console.log(111111, res);
        this.$toast.fail(res.data.message);
      } else {
        //  2. 如果是未关注，调用关注的API
        const res = await userFollowsByIdAPI(this.article.user.id);
        // console.log(2222222, res);
        this.$toast.success(res.data.message);
      }
      // 🔔 由于页面没有刷新，所以需要主动修改 Vue 绑定的数据
      this.article.has_follow = !this.article.has_follow;
    },
    async likeFn() {
      // 💥 注意这里是传递文章 id，对文章点赞或取消点赞
      const res = await updatePostLikeByIdAPI(this.article.id);
      // console.log(res);
      if (res.data.message === "点赞成功") {
        this.article.like_length++;
        this.$toast.success(res.data.message);
      } else {
        this.article.like_length--;
        this.$toast.fail(res.data.message);
      }
      // 状态的变化，用来更新图标颜色
      this.article.has_like = !this.article.has_like;
    },
  },
};
</script>

<style lang="less" scoped>
// 没有添加 scoped 表示全局样式
//  添加了 scoped 后，到底做了什么事情？？
//     1. 模板中标签自动添加 => <标签名 data-v-xxx class="box">
//     2. 选择器自动添加 => .box[data-v-82768ea8]
.header {
  .arrow-left {
    font-size: 20px;
    color: #000;
  }
  .iconnew {
    font-size: 50px;
  }
}
.article-main {
  padding: 10px;
  .title {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0;
  }
  .author {
    font-size: 13px;
    margin-bottom: 20px;
    color: #666;
  }
  // 添加了 /deep/ 后，当前选择器和其后代选择器，都不会添加 [data-v-xxx] 了
  /deep/ .article-in {
    font-size: 13px;
    img {
      width: 100%;
    }
    p {
      text-indent: 2em;
      line-height: 1.5;
      margin: 0.2em;
    }
    .photo {
      text-align: center;
    }
  }
}
.operate {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100px;
  .btn {
    width: 80px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    .iconweixin {
      color: #26ce26;
    }
  }
  .active {
    border-color: red;
    color: red;
  }
}
</style>